import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { ArtistWrapper } from "./style";
import { useAppSelector } from "@/store";
import { shallowEqual } from "react-redux";
import AreaItemv1 from "@/components/area-itemv1";

interface IProps {
  children?: ReactNode;
}

const ArtistPage: FC<IProps> = () => {
  const { artistList } = useAppSelector((state) => ({
    artistList: state.musicLibrary.artistList
  }), shallowEqual)
  return <ArtistWrapper>
    {
      artistList.map(item => (
        <AreaItemv1 itemDate={item} urlwidth={420} isround={1} navigatePath="/artist" />
      ))
    }
  </ArtistWrapper>;
};

export default memo(ArtistPage);